<template>
	<view class="page page-coupon" style="padding-bottom: 0;">
		<!-- 筛选 -->
		<view class="coupon-filter">
			<!-- 状态筛选 -->
			<view class="filter-bar flex-row-between">
				<block v-for="(item, index) in filterBar" :key="index">
					<view class="item" :class="{'active' : filterCurrent == item.id}" @click="filterList(item.id)">
						{{item.title}}
					</view>
				</block>
			</view>
			<!-- 下拉筛选 -->
			<HMfilterDropdown class="filter-drop" :menuTop="72" :defaultSelected="[0]" :filterData="filterData"
				:updateMenuName="true" @confirm="confirm">
			</HMfilterDropdown>
		</view>
		<!-- 列表 -->
		<LoadMore ref="LoadMore" id="LoadMore" :token="true" :diffHeight="152" :initData="initData"
			@dataRefresh='dataRefresh'>
			<view class="coupon-list">
				<block v-for="(item, index) in dataList" :key="index">
					<view class="box-shadow item" @click="Oninfo(item)">
						<view class="part1 flex-row-start">
							<view class="tag"
								:class="{color1: item.coupon.coupon_type == '40',color1: item.coupon.coupon_type == '50', color2: item.coupon.coupon_type == '20', color3: item.coupon.coupon_type == '30', color4: item.coupon.coupon_type == '10',}">
								{{item.coupon.coupon_type_name}}
							</view>
							<!-- 满减10 -->
							<view v-if="item.coupon.coupon_type == 10" class="left flex-column-center">
								<view>
									<text class="font15">￥</text>
									<text class="font20 font-b">{{item.coupon.reduce_money}}</text>
								</view>
								<view class="font10 font-646464">{{'满￥' + item.coupon.full_money + '可用'}}</view>
							</view>
							<!-- 折扣20 -->
							<view v-if="item.coupon.coupon_type == 20" class="left flex-column-center">
								<view>
									<text class="font20 font-b">{{item.coupon.discount*10}}</text>
									<text class="font15">折</text>
								</view>
								<view class="font10 font-646464">无门槛</view>
							</view>
							<!-- 立减30 -->
							<view v-if="item.coupon.coupon_type == 30" class="left flex-column-center">
								<view>
									<text class="font15">￥</text>
									<text class="font20 font-b">{{item.coupon.reduce_money}}</text>
								</view>
								<view class="font10 font-646464">无门槛</view>
							</view>
							<!-- 兑换券40 -->
							<view class="left left0 flex-column-center" v-if="item.coupon.coupon_type == 40">
								<view class="font17 font-b">{{item.coupon.coupon_type_name}}</view>
								<view class="font10 font-646464">无门槛</view>
							</view>
							<!-- 停车券50 -->
							<view class="left left0 flex-column-center" v-if="item.coupon.coupon_type == 50">
								<view class="font17 font-b">停车券</view>
								<view class="font10 font-646464">无门槛</view>
							</view>
							<view class="right">
								<view>
									<text class="font14 font-b name ellipsis">{{item.coupon.name}}</text>
									<text class="online">{{item.coupon.verify_mode == 10 ? '线上' : '线下'}}使用</text>
								</view>
								<view class="font11 font-969696">兑换码：{{item.coupon_code}}</view>
								<view class="font11 font-969696">{{item.begin_time}} ~ {{item.end_time}}</view>
							</view>
							<view v-if="item.status == 'normal'" class="btn">去使用</view>
							<view v-if="item.status == 'use'" class="btn grey">已使用</view>
							<view v-if="initData.param.status == 'expire'" class="btn grey">已过期</view>
						</view>
						<view class="part2 flex-row-between" @click.stop="Onpages(item)">
							<text
								class="font12">适用范围：{{item.coupon.verify_mode == 10?item.coupon.classify == 10?'指定门店使用,点击查看详情':item.coupon.classify == 20?'指定商品使用：点击查看指定商品':
								item.coupon.use_room_type==0?'指定房型使用：点击查看指定房型':item.coupon.use_room_type==1?'指定普通房型使用：点击查看指定房型':'指定时租房使用：点击查看指定时租房':'线下核销使用'}}</text>
							<uni-icons class="font-b" type="arrowright" size="9" color="#000000"></uni-icons>
						</view>
					</view>
				</block>
			</view>
		</LoadMore>
	</view>
</template>

<script>
	import HMfilterDropdown from '@/components/HM-filterDropdown/index.vue';
	import LoadMore from "@/components/j-loadMore/index.vue";
	export default {
		components: {
			HMfilterDropdown,
			LoadMore
		},
		data() {
			return {
				http_h5_url: this.$Config.http_h5_url, //线上地址
				filterBar: [{
						id: 'normal',
						title: '未使用'
					},
					{
						id: 'use',
						title: '已使用'
					},
					{
						id: 'expire',
						title: '已过期'
					}
				],
				filterCurrent: 'normal', // 高亮的id
				filterData: [
					// {
					// 	name: '全部类型',
					// 	type: 'hierarchy',
					// 	submenu: [{
					// 			name: "全部",
					// 			value: ""
					// 		},
					// 		{
					// 			name: "早餐券",
					// 			value: "breakfast"
					// 		},
					// 		{
					// 			name: "现金券",
					// 			value: "cash"
					// 		},
					// 		{
					// 			name: "满减券",
					// 			value: "rebate"
					// 		},
					// 		{
					// 			name: "折扣券",
					// 			value: "discount"
					// 		}
					// 	]
					// },
					{
						name: '核销方式',
						type: 'hierarchy',
						submenu: [{
								name: "全部",
								value: ""
							},
							{
								name: "线上核销",
								value: "10"
							},
							{
								name: "线下核销",
								value: "20"
							}
						]
					}
				],
				dataList: [],
				// 传参数据
				initData: {
					url: 'orderCouponList',
					param: {
						verify_mode: '',
						status: 'normal',
					}
				}
			}
		},
		onLoad: function(options) {},
		methods: {
			// 筛选列表
			filterList(id) {
				this.filterCurrent = id
				this.initData.param.status = id
				this.$refs.LoadMore.oncutRefresh(this.initData)
			},
			// 筛选列表
			confirm(e) {
				this.initData.param.verify_mode = e.value[0][0] == null ? '' : e.value[0][0]
				// this.initData.param.verify_mode = e.value[1][0] == null ? '' : e.value[1][0]
				this.$refs.LoadMore.oncutRefresh(this.initData)
			},
			// LoadMore返回列表数据
			dataRefresh(e) {
				this.dataList = e
			},
			//我的券详情
			Oninfo(e) {
				// #ifdef MP-WEIXIN
				this.$Router.push('/pages/coupon/info?data=id.' + e.coupon_code + ',se.zc')
				// #endif
				// #ifdef H5
				uni.setStorage({
					key: 'firstType',
					data: true,
				})
				window.location.href = this.http_h5_url + '/pages/coupon/info?data=id.' + e.coupon_code + ',se.zc'
				// #endif
			},
			//页面跳转
			Onpages(obj) {
				if (obj.coupon.verify_mode == 20) {
					this.Oninfo(obj)
				} else {
					//制定商品使用
					if (obj.coupon.classify == 20) {
						this.$Router.push('/pages/group/list?id=' + obj.coupon.id)
					}
					//酒店使用
					if (obj.coupon.classify == 10 || obj.coupon.classify == 30) {
						//指定普通房型使用
						if (obj.coupon.use_room_type == 1) {
							this.$Router.push('/pages/hotel/hotelList?couponId=' + obj.coupon.id)
						}
						//指定时租房使用
						if (obj.coupon.use_room_type == 2) {
							this.$Router.push('/pages/hotel/hourRoomList?couponId=' + obj.coupon.id)
						}
					}
				}

			}
		}
	}
</script>

<style lang="less">
	@import url("style.less");
</style>
